<!DOCTYPE html>
<<<<<<< HEAD
<html>
<head>
    <meta charset="UTF-8">
<style>
.multiplication-table {
font-family: monospace;
margin: 20px;
}
.row {
padding: 4px;
}
.row.odd {
background-color: #DDDDDD;
font-weight: bold;
}
.row span:not(:last-child) {
margin-right: 2em;
}
</style>
</head>
<body>
<h2>九九乘法表</h2>
<div id="multiplication-table" class="multiplication-table"></div>

<script>
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('multiplication-table');

for (let i = 1; i <= 9; i++) {
const row = document.createElement('div');
row.className = `row ${i % 2 !== 0 ? 'odd' : ''}`;

const equations = [];
for (let j = 1; j <= i; j++) {
equations.push(`<span>${j}*${i}=${j * i}</span>`);
}
row.innerHTML = `${equations.join('')}`;
container.appendChild(row);
}
});
</script>
</body>
=======
<html lang="en">

<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style>
.odd {
background-color: #DDDDDD;
font-weight: bold;
}
</style>
</head>

<body>
<h3>九九乘法表</h3>
<script>
let result = '';
for (let i = 1; i <= 9; i++) {
let rowClass = i % 2 === 1? 'odd' : '';
result += `<tr class="${rowClass}">`;
for (let j = 1; j <= i; j++) {
result += `<td>${j}×${i}=${j * i}</td>`;
}
result += '</tr>';
}
document.write('<table>' + result + '</table>');
</script>
</body>

>>>>>>> origin/master
</html>